<%@page pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<%@ taglib prefix="s" uri="/struts-tags" %> 
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>

<sx:head cache="false" parseContent="true"/>
<link type="text/css" rel="stylesheet" href="css/standard.css" media="screen">
<link type="text/css" rel="stylesheet" href="css/common.css" media="screen">
<link type="text/css" rel="stylesheet" href="css/reserve.css" media="screen">
<link type="text/css" rel="stylesheet" href="js/yui/assets/skins/sam/calendar.css" media="screen">
<style type='text/css'>
<!--
	.td-topic{
		padding-left: 9px;
		background-color: #EEEEEE;
	}
-->
</style>

<script language="javascript" type="text/javascript" src="js/datevalidate.js"></script>
<script language="javascript" type="text/javascript" src="js/CommonReserve.js"></script>
<script language="javascript" type="text/javascript" src="js/AjaxHandlerUtil.js"></script>
<script language="javascript" type="text/javascript" src="js/NumberFormat154.js"></script>
<script language="javascript" type="text/javascript" src="js/PrintReceipt.js"></script>
<script type="text/javascript">
    function popupOnclick(){
    	var customerAuto    = dojo.widget.byId("customerAuto");
        var customerName    = customerAuto.textInputNode;
        var address 		= document.getElementById("address");
        var overwrite 		= document.getElementById("overwrite");
        var newCustomerName = document.getElementById("newCustomerName");
        var newAddress 		= document.getElementById("newAddress");
        
    	if(overwrite.checked && (newCustomerName.value == '' || newAddress.value == '')){
	        alert('Please enter overwrite customer name and address.');
	        return false;
    	} else if(!overwrite.checked && (customerName.value == '' || address.value == '')){
            alert('Please enter customer name and address.');
            return false;
        }
        var form = document.forms(0);
        form.submit();
        setTimeout("doAfterPrint();", 3000);
    }

    function doAfterPrint(){
        window.opener.location = 'reserveOverview_execute.action';
        window.close();
    }

    function overwriteOnclick(obj){
        var customerName 	= document.getElementById("newCustomerName");
        var address 		= document.getElementById("newAddress");
        if(obj.checked){
        	customerName.disabled 	= false;
        	address.disabled 		= false;
        } else{
        	customerName.disabled 	= true;
        	address.disabled 		= true;
        	customerName.value 		= "";
        	address.value 			= "";
        }
    }

    var _CUSTOMER_INDICATOR = "customerIndicator";
    
    dojo.event.topic.subscribe("/afterLookupCustomer", function(data, key, _text, widget){
        if(key != "undefined" && key != null && key != "") {

    	    document.getElementById(_CUSTOMER_INDICATOR).style.display = "inline";

    	    var paymentId = document.getElementById("servicePaymentId").value;
    	
    	    sendRequest("reservePrintReceipt_getCustomerJSON.action", "customerId=" + key + "&servicePaymentId=" + paymentId , "POST", callbackLookupCustomer);
    	
    	    document.getElementById("customerId").value = trim(key + "");
        }
    });
    callbackLookupCustomer = function() {
        try {
            var ready = req.readyState;
            var jsonObject=null;

            if ( ready == 4 ){
                if(req.status == 200) {
                	//alert(req.responseText);
                    jsonObject=eval( "("+ req.responseText +")" );

                    var customerAuto    = dojo.widget.byId("customerAuto");
                    var customerName    = customerAuto.textInputNode.value;
                    var customerId    	= document.getElementById("customerId");
                    var address			= document.getElementById("address");
                    if(jsonObject.object.result == "error") {
                        alert(jsonObject.object.data.entry.string[1]);

                        customerName.textInputNode.value= "";
                        address.value    				= "";
                    } else {
                        customerId.value    			= getJSONResult(jsonObject.object.data.customerId);
                        address.value    				= getJSONResult(jsonObject.object.data.address);
                    }
                } else {
                    alert("A problem occurred with communicating between the " +
                          "XMLHttpRequest object and the server program. " +
                          "Please try again very soon");
                }
            }
            document.getElementById(_CUSTOMER_INDICATOR).style.display = "none";
        } catch (err) {
            alert("It does not appear that the server " +
              "is available for this application. Please " +
              "try again very soon. \\nError: "+ err.message);
            document.getElementById(_CUSTOMER_INDICATOR).style.display = "none";
        }
    };    

</script>
<sx:div id="printReceiptDIV" loadingText="Loading..." showLoadingText="true"
		cssStyle="padding-top: 3px; background-image: url(images/top_page_bg.jpg); background-repeat: repeat-x;"
    	parseContent="true" separateScripts="true" executeScripts="true" refreshOnShow="true" cssClass="yui-skin-sam">
    	
    <s:form id="frmReserveDetail" name="frmReserveDetail" action="reservePrintReceipt_print.action" method="post" theme="simple">
  	<s:token/>
        <table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
            <tr>
                <td valign="top" width="100%">
					<div style="height:360px; width:550px; padding-top: 5px; overflow:auto;">                        	
                    <table cellpadding="0" cellspacing="0" border="0" width="97%" align="center">
                        <tr> 
                            <td colspan="2" height="20">
                                <s:actionerror />
                                <s:actionmessage cssStyle="font: bolder;color: blue;" />
                            </td>
                        </tr>
                        <tr>
                        	<td valign="top" width="95%" style="padding: 5px">
                        		<table width="95%" cellspacing="1" cellpadding="3" style="border: 1px solid #AAAAAA">
		                        <tr bgcolor="#FFFFFF">
		                        	<td class="td-topic"><s:label key="reserve.printreceipt.printdate" /><font color="red">*</font></td>
		                        	<td>
		                        		<s:textfield id="printReceiptDate" name="reservePrintReceiptVO.printDate" value="%{printDate}" cssClass="iNL" readonly="true" size="10" onchange="validateDetailDateFrom(this)"/>
		                        	</td>
		                        </tr>
		                        <tr bgcolor="#FFFFFF">
		                        	<td class="td-topic"><s:label key="reserve.printreceipt.customername" /><font color="red">*</font></td>
		                        	<td colspan="3">
		                        		<s:hidden id="customerId" name="reservePrintReceiptVO.customerId" />
		                        		<sx:autocompleter id="customerAuto" name="reservePrintReceiptVO.customerName" list="customerList" listValue="customerName" listKey="customerId" 
		                        						  indicator="customerIndicator" valueNotifyTopics="/afterLookupCustomer" /> &nbsp;
										<img id="customerIndicator" src="${pageContext.request.contextPath}/images/indicator.gif" alt="Loading..." style="display:none"/>
		                        	</td>
		                        </tr>
		                        <tr bgcolor="#FFFFFF">
									<td width="" class="td-topic"><s:label key="reserve.printreceipt.address" /></td>
		                        	<td>
		                        		<s:textfield id="address" name="reservePrintReceiptVO.address" cssStyle="border: 0px solid #FFFFFF" size="40"/>
		                        	</td>
		                        </tr>
		                        </table>
                        	</td>
                       	</tr>
                       	<tr>
                        	<td valign="top" width="95%" style="padding: 5px">
	                        	<table width="95%" cellspacing="1" cellpadding="3" style="border: 1px solid #AAAAAA">
			                        <tr bgcolor="#FFFFFF">
										<td class="td-topic" colspan="2"><input type="checkbox" id="overwrite" onclick="overwriteOnclick(this)"/>&nbsp;<s:label key="reserve.printreceipt.checkbox.overwrite" /></td>
			                        </tr>	                        	
			                        <tr bgcolor="#FFFFFF">
										<td width="" class="td-topic"><s:label key="reserve.printreceipt.customername" /><font color="red">*</font></td>
			                        	<td>
			                        		<s:textfield id="newCustomerName" name="reservePrintReceiptVO.newCustomerName" cssStyle="border: 1px solid #555555" disabled="true" size="30"/>
			                        	</td>
			                        </tr>
			                        <tr bgcolor="#FFFFFF">
										<td width="" class="td-topic"><s:label key="reserve.printreceipt.address" /><font color="red">*</font></td>
			                        	<td>
			                        		<s:textfield id="newAddress" name="reservePrintReceiptVO.newAddress" cssStyle="border: 1px solid #555555" disabled="true" size="40"/>
			                        	</td>
			                        </tr>
	                        	</table>
                        	</td>
                       	</tr>	
                        <tr>
                        	<td colspan="2" align="center" style="padding-top: 10px">
	                        	<%-- start criterai --%>
	                        	<s:hidden id="servicePaymentId" name="reservePrintReceiptVO.servicePaymentId" value="%{servicePaymentId}"/>
	                        	<%--end criteria --%>
	                        	<input type="button" value="<s:text name="reserve.printreceipt.button.ok" />" onclick="popupOnclick()" style="border: 1px solid #222222; width: 65px"/>
	                        	<%--
								<sx:submit key="reserve.printreceipt.button.ok" indicator="printReceiptIndicator" id="btnOkPrint" 
								   		   targets="printReceiptDIV" href="reservePrintReceipt_print.action" beforeNotifyTopics="/beforeOkPrint"
								   		   cssStyle="border: 1px solid #222222; width: 65px" />
								--%>
								&nbsp; &nbsp;
								<%--
								<input type="button" value="<s:text name="reserve.printreceipt.button.cancel" />" onclick="window.close()"
									   style="border: 1px solid #222222; width: 65px" />
									   --%>
								<img id="printReceiptIndicator" src="${pageContext.request.contextPath}/images/indicator.gif" alt="Loading..." style="display:none"/>
                        	</td>
                        </tr>
                    </table>
                    </div>
                </td>
            </tr>
        </table>
    </s:form>
<%
    session.setAttribute("S_DATE_FIELDS", "'printReceiptDate'");
%>
<s:url id="hiddenCalendarURL" value="hiddenCalendar.action?" />
<sx:div id="hiddenCalendarDIV" autoStart="false" parseContent="true" executeScripts="true"
        separateScripts="true" showLoadingText="false"
        href="%{hiddenCalendarURL}" refreshOnShow="true"></sx:div>

        
</sx:div>
